<!--组件-输入框-->
<template>
  <div>

    <!--标题、说明、范围-->
    <div class="title" v-if="title">
      <text class="font28 text2">{{title}}</text>
      <LImage class="explain" v-if="explain && explain.length" :src="Config.img('wenhao.png')" @click="explainClick"></LImage>
    </div>

    <!--输入框-->
    <div class="frame bg2" @click="frameClick">
      <slot></slot>
      
      <div class="no" v-if="!isEdit" @click="noClick"></div>
    </div>
  </div>
</template>

<script>

import jmodal from "@/_js/modal";
import jconfig from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{
    value: { //值
      type:String,
      default:'',
    },

    isEdit: { //turn可编辑
      type:Boolean,
      default:true,
    },
    
    title: { //标题
      type:String,
      default:undefined,
    },

    explain: { //说明
      type:String,
      default:undefined,
    },

    placeholder: { //占位符
      type:String,
      default:'',
    }
  },

  data() {
    return {
      T:T,
      Config:jconfig,

      select:false,
    };
  },

  mounted(){
  },

  methods:{

    /**********************************************输入框回调*/
    //输入框-选中
    onFocus(e) {

      this.select = true;
      this.$emit("focus", e);
    },

    //输入框-取消选中
    onBlur(e) {

      this.select = false;
      this.$emit("blur", e);
    },

    //输入内容改变
    onInput(e){

      this.$emit("change", e.value);
      this.$emit("input", e);
    },

    /**********************************************点击回调*/
    //输入框点击
    frameClick(){
      if (!this.isEdit){
        return;
      }
      this.$refs.input && this.$refs.input.focus();
    },

    //说明点击
    explainClick(){
      var parm = {'message':this.explain};
      jmodal.alert(parm,(bool)=>{});
    },

    //不可编辑蒙层
    noClick() {},
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.title{
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}


.frame{
  flex-direction: row;
  align-items: center;

  border-radius: 16px;

  border-width: 2px;
  border-color: transparent;

  padding-left: 40px;
  padding-right: 40px;
}
.no {
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.width8{
  width: 8px;
}
</style>
